<template>
    <!-- 
        1.dialog的显示与否是通过 :visible.sync的值来控制的
        2.close-on-click-modal="false"控制点击遮罩是否隐藏弹出层；
    -->
    <el-dialog title="添加部门" width="560px" :visible.sync="addDeptDialogVisible" :close-on-click-modal="false">
        <!-- rules表示绑定我们自定义的规则 -->
        <el-form :model="addDept" :rules="rules" ref="addForm">
            <!-- :label-width="80"是控制文字的宽度; prop是指定该表单项应用哪个校验规则 -->
            <el-form-item label="部门名称" label-width="78px" prop="name">
                <el-input v-model="addDept.name" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <div class="block"> -->
            <el-form-item label="上级部门" label-width="78px" prop="parents">
                 <!-- <span  class="demonstration" width-="78px" prop="parent"></span> -->
                 <el-cascader
                 v-model="addDept.parents"
                    :options="options"
                    :props="{value:'id',label:'name', checkStrictly: true }"
                    ></el-cascader>
            </el-form-item>
            <el-form-item label="序号" label-width="78px" prop="orderNum">
                <el-input-number v-model="addDept.orderNum" controls-position="right" @change="handleChange" :min="0" :max="100"></el-input-number>
            </el-form-item>   
           
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeAndReset">取 消</el-button>
            <el-button type="primary" @click="sureAdd">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
// import axios from 'axios'
import http from '@/utils/request.js'

export default {
    data() {
        return {
            num :  0,
         
            // parents:'0',
            options :[],
            // addDeptDialogVisible是用来控制弹出框是否显示, false表示不显示；true表示显示
            addDeptDialogVisible: false,
            addDept: {
                id:'',
                name: '',
                parents: [],
                orderNum: '',
                // createTime

          
            },
            // 定义校验规则
            rules: {
                name: [
                    // required表示该值必须要填；message 表示违反规则的提示信息；trigger表示何时出发
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    // { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    mounted(){
        this.showData()
        console.log("chooseData-------------->>",this.chooseData);

        },
    methods: {
        showData(){

            http.get(`/dept`).then((res)=>{
            this.options = res

            console.log("res============>",res);
            res.forEach(element => {
               
                console.log("elements打印：------>",element,element.name,this.options.label);
            });


        },
    )


        },
       
        // 确认添加
        async sureAdd() {
            try {
                // 通过await的方式校验表单的时候，如果校验不通过，this.$refs.editForm.validate()
                // 会抛出异常
                
                console.log("this.parents----------->>"+this.parents);
                if(this.addDept.parents){

                    // console.log("this.addDept.parents----------->>>",this.addDept.parents);
                    // this.addDept.parents.push(0)

                    console.log("if-this.addDept.parents----------->>>",this.addDept.parents);

                    // this.addDept.parents = this.addDept.parents.reverse()[0]

                    
                    await http.post(`dept`, this.addDept)
                    // 编辑成功的提示消息
                    this.$message({ message: '添加成功', type: 'success', duration: 1000})
                    // 隐藏模态框
                    this.addDeptDialogVisible = false
                    // 重置表单
                    this.$refs.addForm.resetFields()
                    // 重新查询数据
                    this.$emit('refresh')
                    this.showData()

                }
                else{
                    

                    // this.addDept.parents = this.addDept.parents.reverse()[0]

                    console.log("else-this.addDept.parents----------->>>",this.addDept.parents);

                    this.addDept.parents.push(0)
                    // let date= new Date()
                    // this.createTime = data
                    // this.addDept.push(date)
                    //await this.$refs.addForm.validate()
                    // 代码如果能走下来，表示校验通过
                    await http.post(`dept`, this.addDept)
                    // 编辑成功的提示消息
                    this.$message({ message: '添加成功', type: 'success', duration: 1000})
                    // 隐藏模态框
                    this.addDeptDialogVisible = false
                    // 重置表单
                    this.$refs.addForm.resetFields()
                    // 重新查询数据
                    this.$emit('refresh')
                    this.showData()
                    
                }
            
                
                
                
               
            }catch(err) {
                console.log(err);
            }
        },
        // defaultValue(){

        //     this.addDept.parents = '0'



        // },
        // 关闭并重置
        closeAndReset() {
            // 隐藏模态框
            this.addDeptDialogVisible = false
            // 重置表单
            this.$refs.addForm.resetFields()
        },
        refresh(){

            showData();
        }
        
    }
}
</script>

<style>

</style>